<template>
    <baseDialog ref="dialogRef" title="安装应用" width="800px" :showFooter="false"  @close="handleClose">
        <div class="common-container">
            <div class="common-main el-card">
                <div class="install-container">
                    <el-steps :active="stepActive" align-center>
                        <el-step title="下载应用"></el-step>
                        <el-step title="安装部署"></el-step>
                        <el-step title="执行发布"></el-step>
                        <el-step title="安装完成"></el-step>
                    </el-steps>
                    <div class="content">
                        <div class="step1" v-if="stepActive == 0" v-loading="step_info.one.loading" element-loading-text="下载中...">
                            <el-result
                                :icon="step_info.one.icon"
                                :title="step_info.one.title"
                                :sub-title="step_info.one.subTitle"
                            >
                            </el-result>
                        </div>
                        <div class="step2" v-if="stepActive == 1" v-loading="step_info.two.loading" element-loading-text="安装中...">
                            <el-result
                                :icon="step_info.two.icon"
                                :title="step_info.two.title"
                                :sub-title="step_info.two.subTitle"
                            >
                            </el-result>
                        </div>
                        <div class="step3" v-if="stepActive == 2">
                            <terminal ref="terminalRef" :isClearTask="true" />
                        </div>
                        <div class="step3" v-if="stepActive == 3">
                            <el-result
                                icon="success"
                                title="安装成功"
                            >
                            </el-result>
                        </div>
                    </div>
                    <div class="footer">
                        <div class="step1" v-if="stepActive == 0">
                            <el-button type="primary" :disabled="!step_info.one.result" :loading="step_info.one.loading" @click="handleNext()">下一步</el-button>
                        </div>
                        <div class="step2" v-if="stepActive == 1">
                            <el-button type="primary" :disabled="!step_info.two.result" :loading="step_info.two.loading" @click="handleNext()">下一步</el-button>
                            <el-button type="primary" :disabled="!step_info.two.result" :loading="step_info.two.loading" @click="handleComplete()">运行完成</el-button>
                        </div>
                        <div class="step3" v-if="stepActive == 2">
                            <el-button type="primary" @click="handleNext()">下一步</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </baseDialog>
</template>

<script setup lang="ts" name="appStoreInstall">
import { ref, reactive, onMounted } from 'vue';
import { manageDownload, manageInstall, manageCommands} from '/@/api/addons/manage';

const dialogRef = ref(null);

const formData = reactive({
    identify: '',
    name: '',
    version: '',
});

const terminalRef = ref(null);

const step_info = reactive({
    one: {
        title: '下载应用完成',
        icon: 'success',
        subTitle: '请耐心等待下载',
        loading: true,
        result: false,
    },
    two: {
        title: '安装部署完成',
        icon: 'success',
        subTitle: '可点击`下一步`执行发布, 或者点击`运行完成`自行发布',
        loading: true,
        result: false,
    },
    three: {
        title: '执行发布完成',
        icon: 'success',
        subTitle: '操作完成',
        loading: true,
        result: false,
    },
});

const stepActive = ref(0);

const emit = defineEmits(['close']);

const setFormData = async (row: any, callback: any) => {

	for (const key in formData) {
		if (row[key] != null && row[key] != undefined) {
			formData[key] = row[key];
		}
	}

    callback();
};

const handleNext = () => {
    stepActive.value += 1;
    if(stepActive.value == 1) {
        install();
    } else if(stepActive.value == 2) {
        commands();
    } else if(stepActive.value == 3) {
        setTimeout(() => {
            dialogRef.value.close();
            location.reload();
        }, 3000);
    }
};

const handleComplete = () => {
    stepActive.value = 3;
    setTimeout(() => {
        dialogRef.value.close();
        location.reload();
    }, 3000);
};

const handleClose = () => {
    emit('close');
};

const open = () => {
    dialogRef.value?.open();
    download();
};

// 下载应用
const download = () => {
    manageDownload({identify:formData.identify, version:formData.version}).then(res => {
        step_info.one.loading = false;
        setTimeout(() => {
            step_info.one.result = true;
            handleNext();
        }, 3000);
    }).catch(err => {
        step_info.one.icon = 'error';
        step_info.one.title = '下载失败，请检查网络后重试';
        step_info.one.subTitle = err.msg;
        step_info.one.loading = false;
    });
};

// 安装部署
const install = () => {
    manageInstall({identify:formData.identify, version:formData.version}).then(res => {
        step_info.two.loading = false;
        setTimeout(() => {
            step_info.two.result = true;
            // handleNext();
        }, 3000);
    }).catch(err => {
        step_info.two.icon = 'error';
        step_info.two.title = '安装失败';
        step_info.two.subTitle = err.msg;
        step_info.two.loading = false;
    });
};

// 执行命令
const commands = () => {
    manageCommands({identify:formData.identify, operate_type: 'install'}).then(res => {
        for (const key in res) {
            if (res[key]!= null && res[key]!= undefined) {
                terminalRef.value?.addTerminalTask(res[key]);
            }
        }

    }).catch(err => {
        step_info.three.icon = 'error';
        step_info.three.title = '执行失败';
        step_info.three.subTitle = err.msg;
        step_info.three.loading = false;
    });
}

onMounted(() => {
});

defineExpose({
    open,
    setFormData
});
</script>

<style lang="scss" scoped>
.common-container {
    margin: 30px auto 30px auto;
    .common-main {
        padding: 20px;

        :deep(.el-steps .el-step__title){
            font-size: 14px;
        }

        :deep(.el-steps .el-step__icon) {
            border: 1px solid;
        }
        :deep(.el-steps .el-step__icon-inner) {
            font-size: 16px !important;
        }

        .install-container {
            width: 100%;
            background-color: #FFF;

            .content {
                padding: 20px;

                .title  {
                    padding: 8px 16px;
                    background-color: rgba(64, 158, 255, 0.1);
                    border-radius: 4px;
                    border-left: 5px solid #409eff;
                    margin: 20px 0;
                    font-size: 16px;

                    .desc {
                        color: #999;
                        font-size: 14px;
                        margin-top: 10px;
                    }
                }
                
                .step1, .step2, .step3 {
                    padding: 15px;
                    border: 1px solid #dcdfe6;
                }

                .step1 {
                    font-size: 14px;
                    line-height: 24px;
                }
            }

            .footer {
                padding: 0 20px 20px 20px;

                .step1, .step2, .step3 {
                    display: flex;
                    justify-content: space-between;
                }
            }
        }
    }

}

</style>
